<template>
  <div class="mui-card">
    <!-- 搜索框 -->
    <div class="mui-input-row mui-search">
      <input v-model="name" type="search" class="mui-input-clear" placeholder="请输入您想查看的书籍" />
      <input class="myButton" type="button" value="搜索" @click.enter="getNewList(start=0)" />
    </div>
    <!-- 展示框 -->
    <ul class="mui-table-view mui-table-view-chevron">
      <li v-for="item in newList" class="mui-table-view-cell mui-media">
        <routerLink :to="'/indexInfo/newDetail/book/'+item.isbn13" class="mui-navigate-right">
          <img
            class="mui-media-object mui-pull-left"
            referrerpolicy="never"
            :src="item.images.small"
          />
          <div class="mui-media-body">
            <p class="interestNumber">
              <span>{{item.title}}</span>
              <span>
                rating:  &nbsp <span>{{item.rating.average}}</span>
              </span>
            </p>
            <p class="mui-ellipsis">
              <span v-for="item in item.author">{{item}}</span> &nbsp | &nbsp
              <span>{{item.pubdate}}</span>
            </p>
          </div>
        </routerLink>
      </li>
      <div class="mui-card-footer" @click="getNewList (start=start+count,count=10)">加载更多...</div>
    </ul>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      newList: [],
      start: 0,
      count: 10,
      commentsView: true,
      name: ""
    };
  },
  created() {},
  methods: {
    getNewList(start = 0, count = 10) {
      this.$http
        .get("v2/book/search?q=" + this.name + "&start=" + start + "&count=" + count )
          .then(result => {
            if (start === 0) {
              this.newList = result.body.books;
            } else {
              this.newList = this.newList.concat(result.body.books)
            }
            console.log(result);
          })
            .catch(err => {
              Toast("请求超时");
              console.log(err);
            });
    }
  }
};
</script>

<style lang="scss" scoped>
    .interestNumber {
        color: #666;
        display: flex;
        justify-content: space-between;
    }
    .interestNumber > span:nth-child(2) > span {
        color: #fa2d0966;
        font-size: 14px;
    }
    .interestNumber > span:nth-child(2) {
        font-size: 12px;
        color: #8f8f94;
    }
    .mui-ellipsis {
        font-size: 12px;
    }
    .mui-input-row {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
    } 
    .mui-input-clear {
        background: #fff;
        border: 0px;
        border-right: 1px solid #ccc;
        border-radius: 0;
        margin: 0px;
    }
    .myButton {
      height:fit-content;
      border: 0px;
    }
    .mui-card {
      margin-bottom: 30px;
    }
</style>